/*
 * StudentInfoBar.js - 学生基本信息栏统一组件
 * 文档保存目录：/e:/DEV_VISION/frontend/static/js/components/student-info-bar.js
 *
 * 功能说明：
 *   1. 完全配置驱动的学生信息栏渲染组件
 *   2. 统一四个模块的学生信息显示逻辑
 *   3. 支持字段配置化、样式自定义、数据验证
 *   4. 自动获取字段配置，无需硬编码字段列表
 *   5. 支持模块化字段显示（不同模块显示不同字段）
 *
 * 使用方法：
 *   1. 页面预留容器：<div id="student-info-bar" class="student-info-bar-row"></div>
 *   2. 调用组件：renderStudentInfoBar(studentData, options)
 *      - studentData: 学生数据对象
 *      - options: 可选配置 {moduleName, containerId, onError}
 *
 * 配置驱动架构：
 *   - 字段配置：通过 /api/config/student_info_bar_fields 获取全局唯一配置
 *   - 字段映射：通过 /api/config/all_field_config 获取显示名称
 *   - 完全消除硬编码，支持动态字段扩展
 */

// 配置缓存，避免重复请求
const studentInfoBarCache = new Map();

/**
 * 主要API - 渲染学生基本信息栏（完全配置驱动）
 * @param {Object} studentData - 学生数据对象
 * @param {Object} options - 可选配置
 * @param {string} options.moduleName - 模块名称，默认'default'
 * @param {string} options.containerId - 容器ID，默认'student-info-bar'
 * @param {Function} options.onError - 错误处理回调
 * @param {boolean} options.autoShow - 是否自动显示，默认true
 * @param {Object} options.customStyles - 自定义样式配置
 * @returns {Promise<void>}
 */
async function renderStudentInfoBar(studentData, options = {}) {
  const {
    moduleName = 'default',
    containerId = 'student-info-bar',
    onError = null,
    autoShow = true,
    customStyles = {}
  } = options;

  console.log(`🎯 StudentInfoBar: 开始渲染学生信息栏, 模块: ${moduleName}`);
  console.log('📋 学生数据:', studentData);

  try {
    // 参数验证
    if (!studentData || typeof studentData !== 'object') {
      throw new Error('学生数据无效或为空');
    }

    // 获取容器元素
    const container = document.getElementById(containerId);
    if (!container) {
      throw new Error(`找不到容器元素: ${containerId}`);
    }

    // 清空容器
    container.innerHTML = '';
    container.className = 'student-info-bar-row';

    // 获取字段配置
    const fieldsConfig = await getStudentInfoBarConfig(moduleName);
    if (!fieldsConfig || !fieldsConfig.fields || fieldsConfig.fields.length === 0) {
      throw new Error(`模块 ${moduleName} 的字段配置为空`);
    }

    console.log(`✅ 获取到 ${fieldsConfig.fields.length} 个字段配置:`, fieldsConfig.fields);

    // 获取显示配置和样式配置
    const displayConfig = fieldsConfig.display_config || {};
    const styleConfig = fieldsConfig.style_config || {};

    // 获取字段显示名称映射
    const fieldDisplayNames = await getFieldDisplayNames();

    // 渲染信息项
    let renderedCount = 0;
    fieldsConfig.fields.forEach((fieldName) => {
      const value = getStudentFieldValue(studentData, fieldName, displayConfig);
      const displayName = getFieldDisplayName(fieldName, fieldDisplayNames, displayConfig);
      
      // 根据全局配置决定是否显示空字段
      const shouldShow = value || (displayConfig.show_empty_fields && shouldShowEmptyField(fieldName));
      
      if (shouldShow) {
        const displayValue = value || getEmptyFieldDisplay(fieldName);
        const item = createInfoBarItem(displayName, displayValue, fieldName, styleConfig, customStyles);
        container.appendChild(item);
        renderedCount++;
      }
    });

    console.log(`✅ 成功渲染 ${renderedCount} 个信息项`);

    // 自动显示信息栏
    if (autoShow) {
      container.classList.add('show');
      if (container.style) {
        container.style.display = 'flex';
      }
    }

    console.log('✅ StudentInfoBar: 学生信息栏渲染完成');

  } catch (error) {
    console.error('❌ StudentInfoBar: 渲染失败:', error);
    
    // 错误处理
    if (onError && typeof onError === 'function') {
      onError(error);
    } else {
      // 默认错误显示
      const container = document.getElementById(containerId);
      if (container) {
        container.innerHTML = `
          <div class="alert alert-warning alert-sm py-2">
            <i class="fas fa-exclamation-triangle me-2"></i>
            学生信息加载失败: ${error.message}
          </div>
        `;
        if (autoShow) {
          container.classList.add('show');
        }
      }
    }
  }
}

/**
 * 获取学生信息栏配置（全局唯一配置）
 * @param {string} moduleName - 模块名称（已废弃，保留参数兼容性）
 * @returns {Promise<Object>} 配置对象
 */
async function getStudentInfoBarConfig(moduleName) {
  const cacheKey = 'student_info_bar_global';
  
  if (studentInfoBarCache.has(cacheKey)) {
    return studentInfoBarCache.get(cacheKey);
  }

  try {
    // 统一使用全局唯一配置
    const response = await fetch('/api/config/student_info_bar_fields');
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    const result = await response.json();
    if (!result.success) {
      throw new Error(result.error || '配置获取失败');
    }

    // 缓存配置
    studentInfoBarCache.set(cacheKey, result.fieldsConfig);
    console.log('✅ 缓存全局学生信息栏配置');

    return result.fieldsConfig;
  } catch (error) {
    console.error('❌ 获取全局学生信息栏配置失败:', error);
    
    // 返回全局唯一配置作为降级方案
    const globalConfig = {
      success: true,
      fields: ['education_id', 'school', 'grade', 'name', 'gender', 'birthday', 'id_card', 'parent_name', 'parent_phone'],
      display_config: {
        grade_class_combined: true,
        show_empty_fields: false,
        field_order: "fixed"
      },
      style_config: {
        container_class: "student-info-bar-row",
        item_class: "info-bar-item me-3 mb-1 d-inline-block",
        label_style: "font-weight: bold;",
        value_style: "color: #666;"
      }
    };
    
    console.warn('⚠️ 使用全局唯一配置作为降级方案');
    return globalConfig;
  }
}

/**
 * 获取全局字段显示名称映射（自动缓存）
 * @returns {Promise<Object>} 字段显示名称映射对象
 */
async function getFieldDisplayNames() {
  const cacheKey = 'all_field_display_names';
  
  if (studentInfoBarCache.has(cacheKey)) {
    return studentInfoBarCache.get(cacheKey);
  }

  try {
    const response = await fetch('/api/config/all_field_config');
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    const result = await response.json();
    if (!result.success) {
      throw new Error(result.error || '配置获取失败');
    }

    // 提取字段显示名称映射
    const displayNames = {};
    const allFieldConfig = result.data?.field_config || result.field_config || result.data || result.config || {};
    
    // 遍历所有模型的字段配置
    Object.values(allFieldConfig).forEach(modelConfig => {
      if (modelConfig && typeof modelConfig === 'object') {
        Object.entries(modelConfig).forEach(([fieldName, fieldConfig]) => {
          if (fieldConfig && fieldConfig.display_name) {
            displayNames[fieldName] = fieldConfig.display_name;
          }
        });
      }
    });

    // 缓存配置
    studentInfoBarCache.set(cacheKey, displayNames);
    console.log('✅ 缓存字段显示名称映射, 字段数量:', Object.keys(displayNames).length);

    return displayNames;
  } catch (error) {
    console.error('❌ 获取字段显示名称失败:', error);
    
    // 返回默认显示名称作为降级方案
    const defaultDisplayNames = {
      'education_id': '教育ID号',
      'school': '学校',
      'grade': '年级',
      'class_name': '班级',
      'name': '姓名',
      'gender': '性别',
      'birthday': '出生日期',
      'id_card': '身份证号码',
      'parent_name': '家长姓名',
      'parent_phone': '家长电话',
    };
    
    console.warn('⚠️ 使用默认显示名称作为降级方案');
    return defaultDisplayNames;
  }
}

/**
 * 获取学生字段值（支持多层级取值）
 * @param {Object} studentData - 学生数据
 * @param {string} fieldName - 字段名
 * @param {Object} displayConfig - 显示配置
 * @returns {string} 字段值
 */
function getStudentFieldValue(studentData, fieldName, displayConfig = {}) {
  // 特殊处理：年级/班级组合显示
  if (displayConfig.grade_class_combined && fieldName === 'grade') {
    const grade = studentData.grade || '';
    const className = studentData.class_name || '';
    
    if (grade && className) {
      return `${grade}/${className}`;
    } else if (grade) {
      return grade;
    } else if (className) {
      return className;
    }
    return '';
  }

  // 优先从主数据获取
  if (studentData[fieldName] !== undefined && studentData[fieldName] !== null) {
    return String(studentData[fieldName]).trim();
  }

  // 从嵌套的 student_info 对象获取
  if (studentData.student_info && studentData.student_info[fieldName] !== undefined) {
    return String(studentData.student_info[fieldName]).trim();
  }

  return '';
}

/**
 * 获取字段显示名称
 * @param {string} fieldName - 字段名
 * @param {Object} displayNames - 显示名称映射
 * @returns {string} 显示名称
 */
function getFieldDisplayName(fieldName, displayNames, displayConfig = {}) {
  // 特殊处理：年级字段在合并模式下显示"年级/班级"
  if (fieldName === 'grade' && displayConfig.grade_class_combined) {
    return '年级/班级';
  }

  return displayNames[fieldName] || fieldName;
}

/**
 * 判断是否应该显示空字段
 * @param {string} fieldName - 字段名
 * @returns {boolean} 是否显示
 */
function shouldShowEmptyField(fieldName) {
  // 身份证号码即使为空也显示"未填写"
  return fieldName === 'id_card';
}

/**
 * 获取空字段的显示值
 * @param {string} fieldName - 字段名
 * @returns {string} 显示值
 */
function getEmptyFieldDisplay(fieldName) {
  if (fieldName === 'id_card') {
    return '未填写';
  }
  return '';
}

/**
 * 创建信息栏项目元素
 * @param {string} displayName - 显示名称
 * @param {string} value - 字段值
 * @param {string} fieldName - 字段名（用于样式类名）
 * @param {Object} styleConfig - 全局样式配置
 * @param {Object} customStyles - 自定义样式
 * @returns {HTMLElement} 信息项元素
 */
function createInfoBarItem(displayName, value, fieldName, styleConfig = {}, customStyles = {}) {
  const item = document.createElement('span');
  
  // 使用全局样式配置
  const baseClass = styleConfig.item_class || 'info-bar-item me-3 mb-1 d-inline-block';
  item.className = `${baseClass} field-${fieldName}`;
  
  // 应用自定义样式（覆盖全局样式）
  if (customStyles.itemClass) {
    item.className += ` ${customStyles.itemClass}`;
  }
  
  if (customStyles.itemStyle) {
    Object.assign(item.style, customStyles.itemStyle);
  }

  // 使用全局样式配置设置内容
  const labelStyle = styleConfig.label_style || 'font-weight: bold;';
  const valueStyle = styleConfig.value_style || 'color: #666;';
  
  item.innerHTML = `<span style="${labelStyle}">${displayName}：</span><span class="field-value" style="${valueStyle}">${value}</span>`;
  
  return item;
}

/**
 * 隐藏学生信息栏
 * @param {string} containerId - 容器ID，默认'student-info-bar'
 */
function hideStudentInfoBar(containerId = 'student-info-bar') {
  const container = document.getElementById(containerId);
  if (container) {
    container.classList.remove('show');
    container.style.display = 'none';
    console.log('✅ 学生信息栏已隐藏');
  }
}

/**
 * 显示学生信息栏
 * @param {string} containerId - 容器ID，默认'student-info-bar'
 */
function showStudentInfoBar(containerId = 'student-info-bar') {
  const container = document.getElementById(containerId);
  if (container) {
    container.classList.add('show');
    container.style.display = 'flex';
    console.log('✅ 学生信息栏已显示');
  }
}

/**
 * 清空配置缓存（用于测试或配置更新）
 */
function clearStudentInfoBarCache() {
  studentInfoBarCache.clear();
  console.log('✅ 学生信息栏配置缓存已清空');
}

// 导出到全局
window.renderStudentInfoBar = renderStudentInfoBar;
window.hideStudentInfoBar = hideStudentInfoBar;
window.showStudentInfoBar = showStudentInfoBar;
window.clearStudentInfoBarCache = clearStudentInfoBarCache;

// 兼容性支持：保留旧的函数名
window.fillStudentInfoBar = function(studentData, options = {}) {
  console.warn('⚠️ fillStudentInfoBar 已弃用，请使用 renderStudentInfoBar');
  return renderStudentInfoBar(studentData, options);
};

console.log('✅ StudentInfoBar 组件已加载');
